<template>
    <div>
<el-row  v-loading="tableLoading">
       <el-col :span="18">
           
  <el-form ref="elForm" 
           :model="formData"
           :rules="rules"
           size="medium"
            label-suffix="："
            class="xfjsonform"
    label-width="30%">
       <h3 style="margin-top:0" class="form-section-title">广告位</h3>
      <el-form-item label="开屏广告位1" prop="as">
        <el-select v-model="formData.as" placeholder="请选择开屏广告位1" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in asOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开屏广告位2" prop="as2">
        <el-select v-model="formData.as2" placeholder="请选择开屏广告位2" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in asOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开屏广告位3" prop="as3">
        <el-select v-model="formData.as3" placeholder="请选择开屏广告位3" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in asOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
          <h3 style="margin-top:0" class="form-section-title">开屏广告</h3>
      <el-form-item label="打开腾讯开屏广告" prop="opentxid" required>
        <el-switch v-model="formData.opentxid"></el-switch>
 <!--  -->
        <label class="form-item-label">腾讯开屏自定义ID：</label>
         <el-input v-model="formData.txid" placeholder="请输入腾讯开屏自定义ID" clearable :style="{width: '50%'}">
        </el-input>
      </el-form-item>
      
      <el-form-item label="打开头条开屏广告" prop="opencsjid" required>
        <el-switch v-model="formData.opencsjid"></el-switch>
        
        <label class="form-item-label">头条开屏自定义ID：</label>
        <el-input v-model="formData.csjid" placeholder="请输入头条开屏自定义ID" clearable :style="{width: '50%'}">
        </el-input>
      </el-form-item>
      
      <el-form-item label="打开腾讯信息流" prop="dkxxlkp" required>
        <el-switch v-model="formData.dkxxlkp"></el-switch>
        
         <label class="form-item-label">信息流自定义ID：</label>
           <el-input v-model="formData.xxlkpid" placeholder="请输入信息流自定义ID" clearable :style="{width: '50%'}">
        </el-input>
      </el-form-item>
       <h3 style="margin-top:0" class="form-section-title">插屏广告</h3>
      <el-form-item label="插屏广告模式" prop="dkcp">
        <el-select v-model="formData.dkcp" placeholder="请选择插屏广告模式" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in dkcpOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="插屏广告ID" prop="cpid">
        <el-input v-model="formData.cpid" placeholder="请输入插屏广告ID" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
   
      <el-form-item label="百度搜索ID" prop="qv">
        <el-input v-model="formData.qv" placeholder="请输入百度搜索ID" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
         
      <el-form-item label="游戏版块" prop="game">
        <el-radio-group v-model="formData.game" size="medium">
          <el-radio v-for="(item, index) in gameOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="短视频版块" prop="shortvdeo">
        <el-radio-group v-model="formData.shortvdeo" size="medium">
          <el-radio v-for="(item, index) in shortvdeoOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
       
   <h3 style="margin-top:0" class="form-section-title">版本与更新</h3>    
     
        <el-form-item label="影音先锋版本" prop="ver">
        <el-input v-model="formData.ver" placeholder="请输入影音先锋版本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="影音先锋更新版本" prop="vers">
        <el-input v-model="formData.vers" placeholder="请输入影音先锋更新版本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>

    <el-form-item label="更新提醒模式" prop="qzgx">
        <el-select v-model="formData.qzgx" placeholder="请选择更新提醒模式" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in qzgxOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
   <!-- Redis设置-->
    <h3 style="margin-top:0" class="form-section-title">Redis设置</h3>
     <el-form-item label="存储的KEY值" prop="cacheId">   
         <el-input v-model="formData.cacheId"  clearable :style="{width: '100%'}">
        </el-input>        
    </el-form-item>
    <el-form-item label="服务器链接参数" prop="redisStr">
   
    <el-input v-model="formData.redisStr" placeholder="包括IP@PORT@USERNAME@PW" clearable :style="{width: '100%'}">
        </el-input>
      
    </el-form-item>
    
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">保存设置</el-button>
        <!-- <el-button @click="resetForm">重置</el-button> -->
      </el-form-item>
    </el-form>
       </el-col>
   </el-row>
    </div>
</template>
<script>
import PlaceAPI from "../Place/PlaceAPI.js";

export default {
    components: { },
    props: ['mediasRow'],
 data() {
    return {
      formData: {
        as: undefined,
        as2: undefined,
        as3: undefined,
        opentxid: true,
        txid: "",
        opencsjid: true,
        csjid: "",
        dkxxlkp: true,
        xxlkpid: "",
        dkcp: 2,
        cpid: "",
        ver: "",
        vers: "",
        qv: "",
        qzgx: "",
        game: 0,
        shortvdeo: 0,
        //保存json到哪个redis服务器的IP和port
        redisStr :"127.0.0.1@6379",       
        cacheId: "xfjson-app-adverte-setting",
      },
      tableLoading:false,
      rules: {
        as: [{
          required: true,
          message: '请选择开屏广告位1',
          trigger: 'change'
        }],
        as2: [{
          required: true,
          message: '请选择开屏广告位2',
          trigger: 'change'
        }],
        as3: [{
          required: true,
          message: '请选择开屏广告位3',
          trigger: 'change'
        }],
        txid: [],
        csjid: [],
        xxlkpid: [],
        dkcp: [{
          required: true,
          message: '请选择插屏广告模式',
          trigger: 'change'
        }],
        cpid: [{
          required: true,
          message: '请输入插屏广告ID',
          trigger: 'blur'
        }],
        ver: [{
          required: true,
          message: '请输入影音先锋版本',
          trigger: 'blur'
        }],
        vers: [{
          required: true,
          message: '请输入影音先锋更新版本',
          trigger: 'blur'
        }],
        qv: [{
          required: true,
          message: '请输入百度搜索ID',
          trigger: 'blur'
        }],
        qzgx: [{
          required: true,
          message: '请选择更新提醒模式',
          trigger: 'change'
        }],
        game: [{
          required: true,
          message: '游戏版块不能为空',
          trigger: 'change'
        }],
        shortvdeo: [{
          required: true,
          message: '短视频版块不能为空',
          trigger: 'change'
        }],
      },
      asOptions: [{
        "label": "腾讯信息流",
        "value": 1
      }, {
        "label": "京东",
        "value": 2
      }, {
        "label": "腾讯",
        "value": 3
      }, {
        "label": "头条",
        "value": 4
      }],
       
      dkcpOptions: [{
        "label": "关闭插屏广告",
        "value": 0
      }, {
        "label": "开屏广告显示失败显示插屏广告",
        "value": 1
      }, {
        "label": "强制显示插屏广告",
        "value": 2
      }],
      qzgxOptions: [{
        "label": "关闭软件提示更新",
        "value": 0
      }, {
        "label": "打开软件提示更新",
        "value": 1
      }, {
        "label": "强制软件更新",
        "value": 2
      }],
      gameOptions: [{
        "label": "关闭发现的游戏版块",
        "value": 0
      }, {
        "label": "打开发现的游戏版块",
        "value": 1
      }],
      shortvdeoOptions: [{
        "label": "关闭发现的短视频版块",
        "value": 0
      }, {
        "label": "打开发现的短视频版块",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
      this.tableLoading = true;
      PlaceAPI.xfjsonGet().then( (response)=>{
        this.tableLoading = false;
        var data = response.json;
        if(!data) return;
        this.formData.cacheId = response.cacheId;
        this.formData.redisStr = response.redisStr;
        for (var key in this.formData) {
          
            if (key == 'opentxid'){
              data[key] = data[key] ==1 ? true: false;
            }
            if (key == 'opencsjid') {
              data[key] = data[key] == 1 ? true : false;
            }
            if (key == 'dkxxlkp') {
              data[key] = data[key] == 1 ? true : false;
            }
            if( data.hasOwnProperty(key)){
                this.formData[key] = data[key];
            }          
          
        }        
      })
  },
  mounted() {},
  methods: {
     
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        //console.log(this.formData)
        this.tableLoading = true;
        // TODO 提交表单
        PlaceAPI.xfjsonSave(this.formData).then((data)=>{
          this.tableLoading = false;
          if(data.result =='error'){
            this.$message({ message: data.message, type: "error" })
          }else{
            this.$message({ message: "提交保存成功", type: "success" })
          }
          
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
} 
</script>
